<template>
  <div>
    <div>子组件属性创建</div>
    <div>{{ msg }}</div>
    <div>{{ msg1 }}</div>
  </div>
</template>

<script setup>
import { watch } from "vue";

// 定义子组件接收的 props
const props = defineProps({
  msg: String,
  msg1: {
    type: String,
    default: "",
  },
});

// 监听器，这里我们不需要立即执行，因为这是对 prop 的监听
// 通常我们不会在子组件内部修改 prop 的值，而是通过事件通知父组件来修改
watch(
  () => props.msg,
  (newValue, oldValue) => {
    //当外部属性值发生变化时，才触发修改
    props.msg = newValue;
  }
);
</script>

<style>
</style>
